<template>
  <view class="wrapper">
    <view class="btn-wrapper">
      <button class="cu-btn primary" @click="handleListClick">申请记录</button>
    </view>
    <form>
      <view class="cu-form-group">
        <view class="title">姓名</view>
        <input placeholder="姓名" name="input" v-model="form.realname"/>
      </view>
      <view class="cu-form-group">
        <view class="title">地址</view>
        <input placeholder="地址" name="input" v-model="form.address"/>
      </view>
      <view class="cu-form-group">
        <view class="title">手机号</view>
        <input placeholder="手机号" name="input" v-model="form.phone"/>
      </view>
      <view class="cu-form-group">
        <view class="title">行业</view>
        <input placeholder="行业" name="input" v-model="form.industry"/>
      </view>
      <view class="cu-form-group">
        <view class="title">营业执照</view>
      </view>
      <view class="cu-form-group" style="border-top: none">
        <view class="choose-image">
          <view class="bg-img" v-if="form.license" @click="ViewImage">
            <image :src="host+form.license" mode="aspectFill" class="image"></image>
            <text class='cuIcon-close close' @tap.stop="DelImg"></text>
          </view>
          <view class="solids" @tap="ChooseImage" v-else>
            <!--<text class='cuIcon-cameraadd'></text>-->
            <image src="/static/img/qt/shop_img.png" class="img"></image>
          </view>
        </view>
      </view>


      <view class="btn" @click="handleSubmit">立即提交</view>
      <my-dialog title="提示" content="提交成功" ref="dialog"/>
    </form>
  </view>
</template>

<script>
import MyDialog from "@/components/dialog";
import Api from "@/utils/Api";

export default {
  name: "join",
  components: {MyDialog},
  data() {
    return {
      form: {
        realname: "",
        phone: "",
        address: "",
        license: null,
        industry: '',
      },
      host: '',
    }
  },
  methods: {
    handleSubmit() {
      if (!this.form.realname) {
        this.$toast("请输入姓名")
      } else if (!this.form.address) {
        this.$toast("请输入商铺地址")
      } else if (!this.form.phone) {
        this.$toast("请输入联系电话")
      } else if (!this.form.industry) {
        this.$toast("请输入行业")
      } else if (!this.form.license) {
        this.$toast("请上传营业执照")
      } else {
        Api.join(this.form).then(res => {
          this.$refs.dialog.show();
        })
      }
    },
    ViewImage() {
      let image = this.host + this.form.license
      uni.previewImage({
        urls: [image],
        current: image
      });
    },
    DelImg() {
      this.form.license = null;
    },
    ChooseImage() {
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], //从相册选择
        success: (res) => {
          console.log(res)
          this.uploadImage(res.tempFilePaths[0]);
        }
      });
    },
    uploadImage(file) {
      Api.uploadImage(file).then(res => {
        let {src, host} = res[0];
        this.form.license = src;
        this.host = host;
      })
    },
    handleListClick() {
      uni.navigateTo({url: `/pages/index/my/join/list`})
    },
  },
}
</script>

<style scoped lang='scss'>
.wrapper {
  background-color: white;
  min-height: 100vh;
  padding: r(40px);
  padding-bottom: env(safe-area-inset-bottom);
}

.cu-form-group .title {
  min-width: calc(4em + 15px);
}

.btn-wrapper {
  text-align: right;

  .primary {
    color: $primary-color;
    background-color: transparent;
  }
}

.choose-image {
  width: r(327px);
  height: r(203px);
  background: #FFFFFF;

  .bg-img {
    width: 100%;
    height: 100%;
    position: relative;

    .image {
      width: 100%;
      height: 100%;
      border-radius: r(15px);
      overflow: hidden;
      //border: 2px solid #E9E9E9;
    }

    .close {
      position: absolute;
      right: r(-5px);
      top: r(-5px);
      background-color: red;
      border-radius: 50%;
      padding: r(5px);
      color: white;
    }
  }

  .solids {
    overflow: hidden;
    width: r(327px);
    height: r(203px);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: r(50px);

    &::after {
      border-width: 0;
    }

    .img {
      width: 100%;
      height: 100%;
    }

  }
}

.btn {
  background-color: $primary-color;
  height: r(84px);
  line-height: r(84px);
  color: white;
  border-radius: r(100px);
  text-align: center;
  margin-top: r(200px);
}
</style>